<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>Map Theme</title>
    <link rel="stylesheet" href="css/demo-center.css" />
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }

        #map-styles .input-item {
            height: 2rem;
        }

        #map-styles .input-item span {
            display: inline-block;
            width: 4rem;
        }

        #map-styles .input-item .input-text {
            color: #0288d1;
            margin-left: 1rem;
            margin-right: 0rem;
            width: 6rem;
        }

        #map-features .input-item {
            height: 2rem;
        }
    </style>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script
        src="https://webapi.amap.com/maps?v=1.4.15&key=58bc2d5e2ef98f5b3296cc313643bb9c&&plugin=AMap.Scale,Map3D"></script>
    <script src="js/init.js"></script>
</head>

<body>
    <div class="map" id="container"></div>
    <div class="input-card" style="width:16rem">
        <h4>官方默认自定义样式</h4>
        <div id="map-styles">
            <div class="input-item">
                <input type='radio' name='mapStyle' value='normal' checked>
                <span>标准</span>
                <span class="input-text">normal</span>
            </div>
            <div class="input-item"><input type='radio' name='mapStyle' value='dark'><span>幻影黑</span><span
                    class="input-text">dark</span></div>
            <div class="input-item"><input type='radio' name='mapStyle' value='light'><span>月光银</span><span
                    class="input-text">light</span></div>
            <div class="input-item"><input type='radio' name='mapStyle' value='whitesmoke'><span>远山黛</span><span
                    class="input-text">whitesmoke</span></div>
            <div class="input-item"><input type='radio' name='mapStyle' value='fresh'><span>草色青</span><span
                    class="input-text">fresh</span></div>
            <div class="input-item"><input type='radio' name='mapStyle' value='grey'><span>雅士灰</span><span
                    class="input-text">grey</span></div>
            <div class="input-item"><input type='radio' name='mapStyle' value='graffiti'><span>涂鸦</span><span
                    class="input-text">graffiti</span></div>
            <div class="input-item"><input type='radio' name='mapStyle' value='macaron'><span>马卡龙</span><span
                    class="input-text">macaron</span></div>
            <div class="input-item"><input type='radio' name='mapStyle' value='blue'><span>靛青蓝</span><span
                    class="input-text">blue</span></div>
            <div class="input-item"><input type='radio' name='mapStyle' value='darkblue'><span>极夜蓝</span><span
                    class="input-text">darkblue</span></div>
            <div class="input-item"><input type='radio' name='mapStyle' value='wine'><span>酱籽</span><span
                    class="input-text">wine</span></div>
        </div>
        <h4>Features</h4>
        <div id="map-features">
            <div class="input-item" style="width:19rem">
                <input type='checkbox' name='mapStyle' value='bg' checked>
                <span class="input-text">Background</span>
            </div>
            <div class="input-item" style="width:19rem">
                <input type='checkbox' name='mapStyle' value='road' checked>
                <span class="input-text">Road</span>
            </div>
            <div class="input-item" style="width:19rem">
                <input type='checkbox' name='mapStyle' value='building' checked>
                <span class="input-text">Buildings</span>
            </div>
            <div class="input-item" style="width:19rem">
                <input type='checkbox' name='mapStyle' value='point' checked>
                <span class="input-text">Mark</span>
            </div>
        </div>
        <h4>Capacity</h4>
        <div id="layer-capacity">
            <label>satellite</label><input id="opacity" type="range" value="0.6" min="0" max="1" step="0.01"
                oninput="setSatelliteOpacity(this.value)" onchange="setSatelliteOpacity(this.value)">
            <label>roadnet</label><input id="roadnetOpacity" type="range" value="1.0" max="1" step="0.01"
                oninput="setRoadnetOpacity(this.value)" onchange="setRoadnetOpacity(this.value)">
        </div>
        <script>
            var defaultLayerOpacity = 1.0;
            var defaultTileLayer = new AMap.TileLayer({
                opacity: defaultLayerOpacity
            });//Default Map Layer
            var roadNetLayerOacity = 1.0;
            var roadNetLayer = new AMap.TileLayer.RoadNet({//Roadnet Layer (Default: invisible)v
                opacity: roadNetLayerOacity
            });
            var buildingsLayerOpacity = 1.0;
            var buildingsLayer = new AMap.Buildings({//Buildings Layer (Bottom)
                zooms: [14, 18],
                zInsex: 10,
                heightFactor: 2,
                opacity: buildingsLayerOpacity
            });
            var satelliteLayerOpacity = 0.6;
            var satelliteLayer = new AMap.TileLayer.Satellite({//Satellite Layer
                map: map,
                opacity: satelliteLayerOpacity
            });
            //天地图部分
            var TDTwms = new AMap.TileLayer.WMTS({
                url: 'http://t4.tianditu.gov.cn/img_w/wmts',
                blend: false,
                tileSize: 256,
                params: {
                    Layer: 'img',
                    Version: '1.0.0',
                    Format: 'tiles',
                    TileMatrixSet: 'w',
                    Style: 'default',
                    tk: 'bf81963c34f286b92c313a4c2bf77e1b'
                }
            });
            //初始化地图
            var map = new AMap.Map('container', {
                //features:['bg','road','point'],
                layers: [
                    //upper is down.
                    defaultTileLayer,
                    //satelliteLayer,
                    //roadNetLayer,
                    // 楼块图层
                    //buildingsLayer
                ],
                resizeEnable: true, //是否监控地图容器尺寸变化
                mapStyle: "amap://styles/normal",
                zoom: 10,
                viewMode: '3D',
                pitch: 60,
                //terrain: true
            });
            var scale = new AMap.Scale({
                visible: true
            });
            map.addControl(scale);

            //绑定radio点击事件
            var radios = document.querySelectorAll("#map-styles input");
            radios.forEach(function (ratio) {
                ratio.onclick = setMapStyle;
            });

            function setMapStyle() {
                var styleName = "amap://styles/" + this.value;
                map.setMapStyle(styleName);
            }

            //设置地图显示要素
            function setMapFeatures() {
                var features = [];
                var inputs = document.querySelectorAll("#map-features input");
                inputs.forEach(function (input) {
                    if (input.checked) {
                        features.push(input.value);
                    }
                });
                map.setFeatures(features);
            }

            //绑定checkbox点击事件
            var inputs = document.querySelectorAll("#map-features input");
            inputs.forEach(function (checkbox) {
                checkbox.onclick = setMapFeatures;
            });
            //Opacity
            function setSatelliteOpacity(val) {
                satelliteLayer.setOpacity(val);
            }
            function setRoadnetOpacity(val) {
                roadNetLayer.setOpacity(val);
            }
        </script>
</body>

</html>